<template>
  <el-dialog
    v-model="localShowDialog"
    :width="dialogWidth"
    @close="handleClose"
    :modal="true"
    :destroy-on-close="true"
  >
    <template #header>
      <span :class="[dialogType == 'pc' ? 'pc-dialog-title' : 'mobile-dialog-title']"
        >请留言我们会联系您</span
      >
    </template>

    <div class="header-border"></div>

    <div class="dialog-tip">
      <img
        src="@/assets/images/leave_message_tip.webp"
        alt=""
        :class="[dialogType == 'pc' ? 'pc-tip-img' : 'mobile-tip-img']"
      />
      <span :class="[dialogType == 'pc' ? 'pc-tip-text' : 'mobile-tip-text']"
        >请务必留下您的联系方式，方便我们联系您！</span
      >
    </div>
    <el-form :model="form" label-position="top" ref="formRef" :rules="rules">
      <el-form-item
        :class="[dialogType == 'pc' ? 'pc-ipt' : 'mobile-ipt']"
        label="手机号码"
        prop="mobile"
        :style="{ width: inputWidth, marginTop: '16px' }"
        required
      >
        <el-input v-model="form.mobile" autocomplete="off" 
                  placeholder="请输入" />
      </el-form-item>
      <el-form-item :class="[dialogType == 'pc' ? 'pc-ipt' : 'mobile-ipt']"
                    label="邮箱" 
                    prop="email" 
                    :style="{ width: inputWidth }">
        <el-input v-model="form.email" 
                  autocomplete="off" 
                  placeholder="请输入" 
                  />
      </el-form-item>

      <el-form-item label="留言" prop="content" required>
        <el-input
          v-model="form.content"
          :rows="4"
          type="textarea"
          placeholder="请输入"
          :style="{ width: '100%' }"
        />
      </el-form-item>
    </el-form>

    <template #footer>
      <div class="dialog-footer">
        <el-button
          @click="clickLeaveMessageBtn"
          :loading="loading"
          :class="[dialogType == 'pc' ? 'pc-send-btn' : 'mobile-send-btn']"
          >留言</el-button
        >
      </div>
    </template>
  </el-dialog>
</template>

<script lang="ts">
import type { FormInstance, FormRules } from 'element-plus';
import { defineComponent, reactive, ref, toRefs, watch } from 'vue';

export default defineComponent({
  name: 'LeaveMessageDialog',

  props: {
    showDialog: {
      type: Boolean,
      default: false,
      required: true
    },
    loading: {
      type: Boolean,
      default: false,
      required: true
    },
    dialogType: {
      type: String,
      default: 'mobile', // 默认是移动端
      validator: (value: string) => ['mobile', 'pc'].includes(value) // 只允许 'mobile' 或 'pc'
    },
    inputHeight: {
      type: String,
      default: '30px'
    }
  },

  setup(props, { emit }) {
    console.log(props, 'props');
    

    // 将 props 转换为响应式对象
    const state = reactive({
      localShowDialog: props.showDialog
    });

    const form = reactive({
      mobile: '',
      email: '',
      content: ''
    });
    const formRef = ref<FormInstance>();
    const rules = reactive<FormRules>({
      mobile: [
        {
          required: true,
          message: '请输入手机号码',
          trigger: 'blur'
        },
        {
          pattern: /^1[3456789]\d{9}$/,
          message: '请输入正确的手机号码',
          trigger: 'blur'
        }
      ],
      email: [
        {
          trigger: 'blur',
          validator: (_, value, callback) => {
            if (!value) {
              return callback(); // 为空时直接通过
            }
            const regex = /^[a-zA-Z0-9._%+-]+@[a-zA-Z0-9.-]+\.[a-zA-Z]{2,}$/;
            if (!regex.test(value)) {
              return callback(new Error('请输入正确的邮箱地址'));
            }
            callback(); // 校验通过
          }
        }
      ],
      content: [
        {
          required: true,
          message: '请输入留言内容',
          trigger: 'blur'
        }
      ]
    });


    // 监听 showDialog 的变化，更新本地状态
    watch(
      () => props.showDialog,
      (newVal) => {
        state.localShowDialog = newVal;
      }
    );

    // 根据 dialogType 计算对话框宽度
    const dialogWidth = props.dialogType === 'pc' ? '488px' : '90vw';

    const inputWidth = props.dialogType === 'pc' ? '328px' : '90%';

    // 处理对话框关闭事件
    const handleClose = () => {
      state.localShowDialog = false; // 修改本地状态
      emit('closeDialog'); // 通知父组件关闭
    };

    const clickLeaveMessageBtn = () => {
      if (!formRef.value) return;
      formRef.value.validate((valid: boolean) => {
        if (!valid) return;
        console.log('valid>>>>>>>>>> ', valid);
        emit('sendLeaveMessage', form); // 通知父组件,发送留言
      });
    };

    return {
      ...toRefs(state),
      dialogWidth,
      inputWidth,
      form,
      handleClose,
      clickLeaveMessageBtn,
      rules,
      formRef
    };
  }
});
</script>

<style lang="scss" scoped>
 $input-height: v-bind('$props.inputHeight');
 @import '@/styles/setInputHeight.scss';
.mobile-dialog-title {
  font-size: 0.427rem;
  color: #000000;
}

.header-border {
  height: 0.5px;
  width: 100%;
  background-color: #dadada;
}

.pc-dialog-title {
  font-size: 16px;
  height: 22px;
  line-height: 22px;
  color: #000000;
}
/* 可根据需要自定义样式 */
.dialog-footer {
  display: flex;
  width: 100%;
  flex-direction: column;
  .pc-send-btn {
    width: 86px;
    align-self: flex-end;
    color: white;
    //background-color: #2b72fe;
    background-color: var(--color-main-theme);
  }

  .mobile-send-btn {
    width: 100%;
    height: 42px;
    line-height: 42px;
    align-self: center;
    color: white;
    background-color: var(--color-main-theme);
    border-radius: 22px;
  }
}

::v-deep .mobile-ipt {
  width: 100% !important;
}

.dialog-tip {
  margin-top: 16px;
  width: 100%;
  padding: 8px 16px;
  border-radius: 6px;
  background: #fef5ecff;
  display: flex;

  .pc-tip-img {
    width: 22px;
    height: 22px;
  }

  .mobile-tip-img {
    width: 0.533rem;
    height: 0.533rem;
  }

  .pc-tip-text {
    line-height: 22px;
    margin-left: 8px;
  }

  .mobile-tip-text {
    font-size: 0.373rem;
    line-height: 0.533rem;
    margin-left: 8px;
  }
}
</style>
